<template>
  <div>
    <!-- 学生列表 -->
    <el-table :data="datas" stripe style="width: 100%;">
        <!-- 表头的列 -->
        <el-table-column v-for="col in params.cols"
              :prop="col.prop" :label="col.label">
          <!-- 自定义模板 -->
          <template slot-scope="scope">
            <!-- 当前这一列，有showInfo方法，需要将当前数据交给showInfo改变展示的内容 -->
            <div v-if="col.type == 'img'">
              <el-image
                    style="width: 150px; height: 100px; border-radius: 10px; box-shadow: 5px 5px 5px gray;"
                    :src="$.getImg(scope.row[col.prop])"></el-image>
            </div>
            <div v-else>
                <!-- 当前这一列，有showInfo方法，需要将当前数据交给showInfo改变展示的内容 -->
                {{
                  col.showInfo ?
                    col.showInfo(scope.row[col.prop]) :
                    scope.row[col.prop]
                }}
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column v-if="params.actions" label="操作">
          <!-- 操作模板自定义 -->
          <template slot-scope="scope">
              <!-- 展示按钮 -->
              <el-button v-for="btn in params.actions"  @click="action(scope.row)">{{btn.btnName}}</el-button>
          </template>
        </el-table-column>

      </el-table>
  </div>
</template>

<script>
  export default {
    props: {
      //调用者传递过来的参数
      params: {
        type: Object
      }
    },
    data() {
      return {
        //表格数据的数组
        datas: []
      }
    },
    methods: {
		action(){
			this.$.ajax({
				type:"GET",
				url: "/cart/insert",
			});
			this.$confirm('是否将此商品加入购物车', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			          this.$message({
			            type: 'success',
			            message: '加入购物车成功!'
			          });
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '加入购物车已取消'
			          });          
			        });
					
		},
      //查询列表数组
      requestList(changeData){
        //发送ajax请求服务器
        this.$.ajax({
          type: "POST",
          url: this.params.request.url,
          data: changeData ? changeData : (this.params.request.data ? this.params.request.data : {}),
          success: (result) => {
            this.datas = result;
          }
        });
      }
    },
    mounted(){
      //页面加载时触发请求的方法
      this.requestList();
    }
  }
</script>

<style>
</style>
